
import React, { Component } from 'react'
import {connect} from 'react-redux'

// 加载样式
import style from './index.scss'
import {showChiceAddress} from '../../actions/addAddressListActions'
//加载组件
import { Checkbox } from 'antd-mobile'

//定义
// const AgreeItem = Checkbox.AgreeItem;

// export default class CheckAndArrow extends Component {
class CheckAndArrow extends Component {
    constructor(props) {
        super(props);
    }
    componentWillMount() {

    }

    /**
     * 事件
     */
    toUrl(url) {
	    this.context.router.push(url);
    }

    //返回的数据
    getData(data) {
        // if (data.value) {
            this.props.onClick('DOM', data.key, data.check); //传递给父组件
            //  console.log('点击Click=', data.key,data.value)
        // }
        // else {
        //      this.props.onClick('checkbox', data.target.id, data.target.checked); //传递给父组件 :手机
        // }
    }

    deleteCertificates(event,name,id){
        this.props.onDeleteHand(event,name,id)
    }

    toCarry(e,item){
        sessionStorage.setItem('twHandleItem',JSON.stringify(item))
        sessionStorage.removeItem('twCacheAllState')
        let choiceAddress = {
            cellNum: item.address.cellNum,
            cityId: item.address.cityId ,
            contactName: item.address.contactName,
            countyId: item.address.countyId,
            createTime: 1503294068000,
            defalutFlag: 1,
            fullAddr: item.address.fullAddr,
            id: item.address.provinceId,
            postCode: null,
            provinceId: item.address.provinceId,
            street: item.address.street,
            streetId: null,
            updateTime: '',
            userId: ""
        };
        sessionStorage.setItem('choiceAddress', JSON.stringify(choiceAddress))  //选择的地址
        this.props.dispatch(showChiceAddress(false))
        
        this.toUrl('twHome')  //跳转
        
        e.stopPropagation()
    }

    /**
     * 组件
     */
    render() {

        const borderT = this.props.className ? ' ' + this.props.className : ''; //顶部有最上面一条边框的样式
        let res = this.props.data;
	    // type: state.visaType=='free'?1:state.visaType=='again'?3:state.visaType=='spouse'
	    // ?4:state.visaType=='sz'?5:null, //签注类型：1:个人游；2：团体旅游；3：商务出行；4：夫妻探亲；5:非广东户籍深圳人员个人游
      // visa: [{index: 1,check:'free',name:'往来港澳个人旅游在签注(自由行)'},{index:3,check:'again',name:'往来港澳商务再次签注'},
	    //{index:4,check:'spouse',name:'往来港澳夫妻探亲再签注'},{index:4,check:'sz',name:'在深圳非广东户籍'}],

        return (
            <div className={style.checkList}>

                {this.props.data.map((item,i)=> (

                    <div className={style.checkOption} key={item.key} onClick={(data) => this.getData(item)}>
                        <div className={style.checkInfo}>
                            <Checkbox
                                id={item.key}
                                checked={item.check}
                            >
                            </Checkbox>
                        </div>

                        <div className={style.personal}>
                            <div className={style.personalTitle} onClick={(e)=>{this.toCarry(e,item);}}>
                                <div>
                                    <span className="text-overflow-1" style={{width:'5.35rem',display: 'inline-block'}}>{item.orderEndorsementTw.passName+item.orderEndorsementTw.typeName}</span>
                                </div>
                                <img src="./images/icon_to_r.png" alt=""/>
                            </div>
                            <div className={style.address}>
                                <div className={style.more}>
                                    {/*办理次数:香港,三月一次;澳门,三月一次*/}
                                  <span>签注种类:</span>
                                  <span>{`台湾，${item.orderEndorsementTw.timesName}`}</span>
                                  <div className={style.dustbin} onClick={(e)=>{this.deleteCertificates(e,item.orderEndorsementTw.passName,item.orderEndorsementTw.passCode)}}>
	                                  <img src="./images/dustbin.png" alt="" />
                                  </div>
                                </div>
                                <div className={style.name}>收件人: <span>{item.address.contactName}</span> ，<span>{item.address.cellNum}</span></div>
                                <div className={style.location+' text-overflow-2'}>{item.address.fullAddr.replace(null,'')}</div>
                            </div>
                        </div>
                    </div>
                ))}

            </div>

        );
    }
}

//使用context
CheckAndArrow.contextTypes = {
	router: React.PropTypes.object.isRequired
};
// 
CheckAndArrow.defaultProps = {
    // 需要的数据格式
    list: [
        { key: 0, label: '', check: false, value: '' },
    ]
}

function mapStateToProps(state) {
	return Object.assign({}, state.addressList,);
}

export default connect(mapStateToProps)(CheckAndArrow);
